﻿<template>
    <!-- 搜索组件宽度自适应于外层 -->
    <view class="coreshop-padding-left-10 coreshop-padding-right-10 coreshop-padding-bottom-10  coreshop-padding-top-10 coreshop-margin-left-10 coreshop-margin-right-10 coreshop-margin-bottom-10  coreshop-margin-top-10 coreshop-bg-white" v-bind:class="coreshopData.parameters.style">
        <u-toast ref="uToast"></u-toast>
        <u-search :placeholder="coreshopData.parameters.keywords" v-model="keyword" shape="square" :show-action="true" action-text="搜索" @custom="goSearch" @search="goSearch"></u-search>
    </view>
</template>
<script>
    export default {
        name: "coreshopSearch",
        props: {
            coreshopData: {
                required: true,
            }
        },
        data() {
            return {
                keyword: '',
                searchTop: 0,
                scrollTop: 0,
                searchFixed: this.$store.state.searchFixed || false,
            };
        },
        created() {
            this.searchStyle()
        },
        methods: {
            searchStyle() {
                this.$store.commit('searchStyle', this.coreshopData.parameters.style)
            },
            change(value) {
                // 搜索框内容变化时，会触发此事件，value值为输入框的内容
                //console.log(value);
            },
            goSearch() {
                if (this.keyword != '') {
                    this.$u.route('/pages/category/list/list?key=' + this.keyword);
                } else {
                    this.$refs.uToast.show({ message: '请输入查询关键字', type: 'warning', })
                }
            },
            handleScroll() {
                this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                this.scrollTop >= this.searchTop ? this.searchFixed = true : this.searchFixed = false;
            },
        },
    }
</script>
